html {
    background-color: #f3f3f4;
}

.loaders {
    height: 100%;
    line-height: 500px;
    color: #1ab394;
    text-align: center;
    font-size: 2.5em;
}

.loader-double {
    border-radius: 50px;
    border: 6px solid transparent;
    border-top-color: #1ab394;
    border-bottom-color: #1ab394;
    animation: spin 1.5s linear infinite;
}

.loader {
    display: inline-block;
    position: relative;
    width: 50px;
    height: 50px;
    vertical-align: middle;
}

.loader-double:before {
    top: 15px;
    left: 15px;
    bottom: 15px;
    right: 15px;
    animation: spinreverse 3s linear infinite;
}

.loader-double:before,
.loader-double:after {
    content: '';
    position: absolute;
    top: 5px;
    right: 5px;
    bottom: 5px;
    left: 5px;
    border-radius: 50px;
    border: 6px solid transparent;
    border-top-color: #1ab394;
    border-bottom-color: #1ab394;
    opacity: 0.6;
    filter: alpha(opacity=60);
    animation: spinreverse 2s linear infinite;
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        tranform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        tranform: rotate(360deg);
    }
}

@keyframes spinreverse {
    0% {
        -webkit-transform: rotate(0deg);
        tranform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(-360deg);
        tranform: rotate(-360deg);
    }
}